<template>
    <div class="banner">
        <div class="title">
            <h3  @click="shandow(index)" v-for="(item,index) in flist" :key="index" :class="{active:currentIndex==index}">{{item.name}}</h3>
        </div>
        <div class="center" v-show="currentIndex==0">
            <div class="good" v-for="(item,index) in goods" :key="index">
                <img :src="item.picture" alt="">
                <div class="left">
                    <div class="name">{{item.name}}</div>
                    <div class="sale">月售：{{item.month_saled}}</div>
                    <div class="price">￥{{item.min_price}}</div>
                    <span>{{item.promotion_info}}</span>
                    <div class="sell">{{item.unit}}</div>
                    <button @click="middle(item)" >{{item.status==0? '马上抢':'已抢'}}</button>
                </div>
            </div>
        </div>
        <div class="ming" v-show="currentIndex==1">
            上新预告
        </div>
    </div>
</template>

<script>
import {tuan_list} from '../api'
export default {
    data(){
        return{
            flist:[
                {name:'正在抢购',status:false},{name:'上新预告',status:false}
            ],
            goods:[],
            currentIndex:0,
        }
    },
    mounted(){
        tuan_list({status:0}).then((res)=>{
            // console.log(res.data.list);
            this.goods = res.data.list
            // console.log(goods);
        })
    },
    methods:{
        middle(item){
            if (item.status==0) {
                item.status=1
            }
        },
        shandow(index){
            this.currentIndex = index
        }
    }
}
</script>

<style scoped>
    .banner {
        width: 100%;
        flex: 1;
        /* height: 100px; */
        background-color: aqua;
        overflow: auto;
        display: flex;
        flex-direction: column;
    }
    .title {
        /* width: 100%; */
        height: 30px;
        display: flex;
        margin-left: 20px;
    }
    h3{
        width: 100px;
    }
    .center {
        /* width: 95%; */
        margin: auto;
        border-radius: 10px;
        flex: 1;
        background-color: paleturquoise;
    }
    .good {
        width: 100%;
        height:120px;
        border-bottom: 1px solid #000;
        margin-top: 10px ;
        display: flex;
        position: relative;
    }
    img {
        width: 70px;
        height: 70px;
    }
    .left {
        margin-left: 10px;
        flex: 1;

    }
    .sale {
        color: yellow;
    }
    .price {
        display: inline-block;
        color: red;
        font-weight: bolder;
        font-size: 20px;
    }
    span {
        display: inline-block;
        width: 50px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 14px;
        margin-left: 10px;
    }
    .sell {
        font-size: 12px;
    }
    button {
        position: absolute;
        width: 100px;
        height: 30px;
        background-color: red;
        color: white;
        border-radius: 10px;
        border: none;
        right: 20px;
        top: 30px;
    }
    .ming {
        width: 100%;
        height: 100%;
        font-size: 30px;
        text-align: center;
        color: rebeccapurple;
        line-height: 200px;
    }
    .active {
        color: red;
    }
</style>